<script setup>
import {ref} from "vue";
import {useEventListener} from "@vueuse/core";

const props = defineProps({
  placement: {
    type: String,
    default: 'top'
  },
  overflowType: {
    type: String,
    default: 'ellipsis'
  },
  content:{
    type: String,
    default: ''
  }
})
const textRef = ref();
const disabled = ref(false);
useEventListener(textRef, 'mouseenter', () => {
  if (textRef.value?.scrollWidth > textRef.value?.offsetWidth) {
    disabled.value = true;
  } else {
    disabled.value = false;
  }
})

useEventListener(textRef, 'mouseleave', () => {
  if (textRef.value?.scrollWidth > textRef.value?.offsetWidth) {
    disabled.value = false;
  } else {
    disabled.value = false;
  }
})
</script>

<template>
  <a-tooltip :content="content" trigger="hover" :popup-visible="disabled">
    <div ref="textRef" class="truncate" :style="{textOverflow:overflowType}">{{content}}</div>
  </a-tooltip>
</template>

<style scoped lang="scss">

</style>
